<!DOCTYPE html>

<html>
<head>
<title>Name Comp: Host Language Label</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/testdriver.js"></script>
<script src="../../resources/testdriver-vendor.js"></script>
<script src="../../resources/testdriver-actions.js"></script>
<script src="../../wai-aria/scripts/aria-utils.js"></script>
</head>
<body>
<h1>AccName: Host Language Label Tests</h1>
<p>Tests the <a href="https://w3c.github.io/accname/#comp_host_language_label">#comp_host_language_label</a> portions of the AccName <em>Name Computation</em> algorithm.</p>
<h2>HTML input with value, alt, etc.</h2>
<input class="ex" data-expectedlabel="button label" data-testname="html: input[type=button]" type="button" value="button label"/>
<input alt="image input label" class="ex" data-expectedlabel="image input label" data-testname="html: input[type=image]" src="" type="image"/>
<input class="ex" data-expectedlabel="reset label" data-testname="html: input[type=reset]" type="reset" value="reset label"/>
<input class="ex" data-expectedlabel="submit label" data-testname="html: input[type=submit]" type="submit" value="submit label"/>
<h2>HTML input label/for</h2>
<!-- above: input[type=button] -->
<label for="cb">checkbox label</label><input class="ex" data-expectedlabel="checkbox label" data-testname="html: label[for] input[type=checkbox]" id="cb" type="checkbox"/><br/>
<label for="cbv">checkbox label with non-empty value</label><input class="ex" data-expectedlabel="checkbox label with non-empty value" data-testname="html: label[for] input[type=checkbox][value='test']" id="cbv" type="checkbox" value="test"/><br/>
<label for="cbc">checkbox label checked</label><input checked="" class="ex" data-expectedlabel="checkbox label checked" data-testname="html: label[for] input[type=checkbox][checked]" id="cbc" type="checkbox"/><br/>
<label for="cbcv">checkbox label checked with non-empty value</label><input checked="" class="ex" data-expectedlabel="checkbox label checked with non-empty value" data-testname="html: label[for] input[type=checkbox][checked][value='test']" id="cbcv" type="checkbox" value="test"/><br/>
<label for="co">color label</label><input class="ex" data-expectedlabel="color label" data-testname="html: label[for] input[type=color]" id="co" type="color"/><br/>
<label for="cov">color label with non-empty value</label><input class="ex" data-expectedlabel="color label with non-empty value" data-testname="html: label[for] input[type=color][value='#999999']" id="cov" type="color" value="#999999"/><br/>
<label for="da">date label</label><input class="ex" data-expectedlabel="date label" data-testname="html: label[for] input[type=date]" id="da" type="date"/><br/>
<label for="dav">date label with non-empty value</label><input class="ex" data-expectedlabel="date label with non-empty value" data-testname="html: label[for] input[type=date][value='2025-01-01']" id="dav" type="date" value="2025-01-01"/><br/>
<label for="dtl">datetime-local label</label><input class="ex" data-expectedlabel="datetime-local label" data-testname="html: label[for] input[type=datetime-local]" id="dtl" type="date"/><br/>
<label for="dtlv">datetime-local label with non-empty value</label><input class="ex" data-expectedlabel="datetime-local label with non-empty value" data-testname="html: label[for] input[type=datetime-local][value='2025-01-01T00:01']" id="dtlv" type="date" value="2025-01-01T00:01"/><br/>
<label for="em">email label</label><input class="ex" data-expectedlabel="email label" data-testname="html: label[for] input[type=email]" id="em" type="email"/><br/>
<label for="emv">email label with non-empty value</label><input class="ex" data-expectedlabel="email label with non-empty value" data-testname="html: label[for] input[type=email][value='test@test.com']" id="emv" type="email" value="test@test.com"/><br/>
<!-- todo: results for input[type=file] currently differ in all engines -->
<!--
<label for="fi">file label</label><input id="fi" type="file" data-expectedlabel="file label" data-testname="html: label[for] input[type=file]" class="ex"><br>
-->
<!-- skipped: input[type=hidden] for/id n/a -->
<!-- above: input[type=image] -->
<label for="mo">month label</label><input class="ex" data-expectedlabel="month label" data-testname="html: label[for] input[type=month]" id="mo" type="month"/><br/>
<label for="mov">month label with non-empty value</label><input class="ex" data-expectedlabel="month label with non-empty value" data-testname="html: label[for] input[type=month][value='2025-01']" id="mov" type="month" value="2025-01"/><br/>
<label for="n">number label</label><input class="ex" data-expectedlabel="number label" data-testname="html: label[for] input[type=number]" id="n" type="number"/><br/>
<label for="nv">number label with non-empty value</label><input class="ex" data-expectedlabel="number label with non-empty value" data-testname="html: label[for] input[type=number][value=2025]" id="nv" type="number" value="2025"/><br/>
<label for="pw">password label</label><input class="ex" data-expectedlabel="password label" data-testname="html: label[for] input[type=password]" id="pw" type="password"/><br/>
<label for="pwv">password label with non-empty value</label><input class="ex" data-expectedlabel="password label with non-empty value" data-testname="html: label[for] input[type=password][value='test']" id="pwv" type="password" value="test"/><br/>
<label for="ra">radio label</label><input class="ex" data-expectedlabel="radio label" data-testname="html: label[for] input[type=radio]" id="ra" type="radio"/><br/>
<label for="rav">radio label with non-empty value</label><input class="ex" data-expectedlabel="radio label with non-empty value" data-testname="html: label[for] input[type=radio][value='test']" id="rav" type="radio" value="test"/><br/>
<label for="rng">range label</label><input class="ex" data-expectedlabel="range label" data-testname="html: label[for] input[type=range]" id="rng" type="range"/><br/>
<label for="rngv">range label with non-empty value</label><input class="ex" data-expectedlabel="range label with non-empty value" data-testname="html: label[for] input[type=range][min=0][max=10][value=5]" id="rngv" max="10" min="0" type="range" value="5"/><br/>
<!-- input[type=reset] above -->
<label for="search">search label</label><input class="ex" data-expectedlabel="search label" data-testname="html: label[for] input[type=search]" id="search" type="search"/><br/>
<label for="searchv">search label with non-empty value</label><input class="ex" data-expectedlabel="search label with non-empty value" data-testname="html: label[for] input[type=search][value='test']" id="searchv" type="search" value="test"/><br/>
<!-- input[type=submit] above -->
<label for="tel">tel label</label><input class="ex" data-expectedlabel="tel label" data-testname="html: label[for] input[type=tel]" id="tel" type="tel"/><br/>
<label for="telv">tel label with non-empty value</label><input class="ex" data-expectedlabel="tel label with non-empty value" data-testname="html: label[for] input[type=tel][value='123-45-678']" id="telv" type="tel" value="123-45-678"/><br/>
<label for="t">textfield label</label><input class="ex" data-expectedlabel="textfield label" data-testname="html: label[for] input[type=text]" id="t" type="text"/><br/>
<label for="tv">textfield label with non-empty value</label><input class="ex" data-expectedlabel="textfield label with non-empty value" data-testname="html: label[for] input[type=text][value='test']" id="tv" type="text" value="test"/><br/>
<label for="time">time label</label><input class="ex" data-expectedlabel="time label" data-testname="html: label[for] input[type=time]" id="time" type="time"/><br/>
<label for="timev">time label with non-empty value</label><input class="ex" data-expectedlabel="time label with non-empty value" data-testname="html: label[for] input[type=time][value='00:01']" id="timev" type="time" value="00:01"/><br/>
<label for="url">url label</label><input class="ex" data-expectedlabel="url label" data-testname="html: label[for] input[type=url]" id="url" type="url"/><br/>
<label for="urlv">url label with non-empty value</label><input class="ex" data-expectedlabel="url label with non-empty value" data-testname="html: label[for] input[type=url][value='https://www.w3.org']" id="urlv" type="url" value="https://www.w3.org"/><br/>
<label for="week">week label</label><input class="ex" data-expectedlabel="week label" data-testname="html: label[for] input[type=week]" id="week" type="week"/><br/>
<label for="weekv">week label with non-empty value</label><input class="ex" data-expectedlabel="week label with non-empty value" data-testname="html: label[for] input[type=week][value='2025-W01']" id="weekv" type="week" value="2025-W01"/><br/>
<h2>HTML input label encapsulation</h2>
<!-- above: input[type=button] -->
<label><input class="ex" data-expectedlabel="checkbox label" data-testname="html: label input[type=checkbox] encapsulation" type="checkbox"/>checkbox label</label><br/>
<label><input class="ex" data-expectedlabel="checkbox label with non-empty value" data-testname="html: label input[type=checkbox][value='test'] encapsulation" type="checkbox" value="test"/>checkbox label with non-empty value</label><br/>
<label><input checked="" class="ex" data-expectedlabel="checkbox label checked" data-testname="html: label input[type=checkbox][checked] encapsulation" type="checkbox"/>checkbox label checked</label><br/>
<label><input checked="" class="ex" data-expectedlabel="checkbox label checked with non-empty value" data-testname="html: label input[type=checkbox][value='test'][checked] encapsulation" type="checkbox" value="test"/>checkbox label checked with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="color label" data-testname="html: label input[type=color] encapsulation" type="color"/>color label</label><br/>
<label><input class="ex" data-expectedlabel="color label with non-empty value" data-testname="html: label input[type=color][value='#999999'] encapsulation" type="color" value="#999999"/>color label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="date label" data-testname="html: label input[type=date] encapsulation" type="date"/>date label</label><br/>
<label><input class="ex" data-expectedlabel="date label with non-empty value" data-testname="html: label input[type=date][value='2025-01-01'] encapsulation" type="date" value="2025-01-01"/>date label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="datetime-local label" data-testname="html: label input[type=datetime-local] encapsulation" type="datetime-local"/>datetime-local label</label><br/>
<label><input class="ex" data-expectedlabel="datetime-local label with non-empty value" data-testname="html: label input[type=datetime-local][value='2025-01-01T00:01'] encapsulation" type="datetime-local" value="2025-01-01T00:01"/>datetime-local label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="email label" data-testname="html: label input[type=email] encapsulation" type="email"/>email label</label><br/>
<label><input class="ex" data-expectedlabel="email label with non-empty value" data-testname="html: label input[type=email][value='test@test.com'] encapsulation" type="email" value="test@test.com"/>email label with non-empty value</label><br/>
<!-- todo: results for input[type=file] currently differ in all engines -->
<!--
<label><input type="file" data-expectedlabel="file label" data-testname="html: label input[type=file] encapsulation" class="ex">file label</label><br>
-->
<!-- skipped: input[type=hidden] n/a -->
<!-- above: input[type=image] -->
<label><input class="ex" data-expectedlabel="month label" data-testname="html: label input[type=month] encapsulation" type="month"/>month label</label><br/>
<label><input class="ex" data-expectedlabel="month label with non-empty value" data-testname="html: label input[type=month][value='2025-01'] encapsulation" type="month" value="2025-01"/>month label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="number label" data-testname="html: label input[type=number] encapsulation" type="number"/>number label</label><br/>
<label><input class="ex" data-expectedlabel="number label with non-empty value" data-testname="html: label input[type=number][value=1] encapsulation" type="number" value="1"/>number label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="password label" data-testname="html: label input[type=password] encapsulation" type="password"/>password label</label><br/>
<label><input class="ex" data-expectedlabel="password label with non-empty value" data-testname="html: label input[type=password][value='test'] encapsulation" type="password" value="test"/>password label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="radio label" data-testname="html: label input[type=radio] encapsulation" type="radio"/>radio label</label><br/>
<label><input class="ex" data-expectedlabel="radio label with non-empty value" data-testname="html: label input[type=radio][value='test'] encapsulation" type="radio" value="test"/>radio label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="range label" data-testname="html: label input[type=range] encapsulation" type="range"/>range label</label><br/>
<label><input class="ex" data-expectedlabel="range label with non-empty value" data-testname="html: label input[type=range][value='5'][min='0'][max='10'] encapsulation" max="10" min="0" type="range" value="5"/>range label with non-empty value</label><br/>
<!-- above: input[type=reset] -->
<label><input class="ex" data-expectedlabel="search label" data-testname="html: label input[type=search] encapsulation" type="search"/>search label</label><br/>
<label><input class="ex" data-expectedlabel="search label with non-empty value" data-testname="html: label input[type=search][value='test'] encapsulation" type="search" value="test"/>search label with non-empty value</label><br/>
<!-- above: input[type=submit] -->
<label><input class="ex" data-expectedlabel="tel label" data-testname="html: label input[type=tel] encapsulation" type="tel"/>tel label</label><br/>
<label><input class="ex" data-expectedlabel="tel label with non-empty value" data-testname="html: label input[type=tel][value='123-45-678'] encapsulation" type="tel" value="123-45-678"/>tel label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="textfield label" data-testname="html: label[for] input[type=text] encapsulation" type="text"/>textfield label</label><br/>
<label><input class="ex" data-expectedlabel="textfield label with non-empty value" data-testname="html: label[for] input[type=text][value='test'] encapsulation" type="text" value="test"/>textfield label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="time label" data-testname="html: label input[type=time] encapsulation" type="time"/>time label</label><br/>
<label><input class="ex" data-expectedlabel="time label with non-empty value" data-testname="html: label input[type=time][value='00:01'] encapsulation" type="time" value="00:01"/>time label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="url label" data-testname="html: label input[type=url] encapsulation" type="url"/>url label</label><br/>
<label><input class="ex" data-expectedlabel="url label with non-empty value" data-testname="html: label input[type=url][value='https://www.w3.org'] encapsulation" type="url" value="https://www.w3.org"/>url label with non-empty value</label><br/>
<label><input class="ex" data-expectedlabel="week label" data-testname="html: label input[type=week] encapsulation" type="week"/>week label</label><br/>
<label><input class="ex" data-expectedlabel="week label with non-empty value" data-testname="html: label input[type=week][value='2025-W01'] encapsulation" type="week" value="2025-W01"/>week label with non-empty value</label><br/>
<!-- skipped: skip textarea for v1 since all engines fail in different ways. need to verify label/textarea is expected. -->
<!--
<h2>HTML textarea</h2>
<label for="ta">textarea label</label><textarea data-expectedlabel="textarea label" data-testname="html: label[for] textarea" class="ex"></textarea><br>
<label for="ta">textarea label<textarea data-expectedlabel="textarea label" data-testname="html: textarea encapsulation" class="ex"></textarea></label><br>
-->
<h2>HTML select</h2>
<!-- todo: select for/id -->
<label for="select">select label</label>
<select class="ex" data-expectedlabel="select label" data-testname="html: select for/id" id="select">
<option>foo</option>
</select>
<br/>
<!-- select encapsulation -->
<label>
  select label
  <select class="ex" data-expectedlabel="select label" data-testname="html: select encapsulation">
<option>foo</option>
</select>
</label><br/>
<!-- todo: select labeled by selected option. All engines currently fail in different ways. Not sure which is correct. -->
<!--
<select data-expectedlabel="select label" data-testname="html: select w/selected option" class="ex">
  <option>foo</option>
  <option selected>select label</option>
  <option>bar</option>
</select>
<br>
-->
<h2>HTML img/picture</h2>
<!-- skipped: img:not([alt]) -->
<!-- skipped: img[alt=""] -->
<img alt="image label" class="ex" data-expectedlabel="image label" data-testname="html: img[alt] (non-empty)" src=""/>
<picture>
<source srcset="#"/>
<img alt="picture label" class="ex" data-expectedlabel="picture label" data-testname="html: picture &gt; img[alt] (non-empty)" src=""/>
</picture>
<!-- elsewhere: image map area alt -> ./fragile/area-alt.html -->
<h2>HTML fieldset/legend</h2>
<fieldset class="ex" data-expectedlabel="fieldset legend label" data-testname="html: fieldset &gt; legend">
<legend>fieldset legend label</legend>
<input type="text"/><br/>
</fieldset>
<h2>HTML table/caption</h2>
<table class="ex" data-expectedlabel="table caption label" data-testname="html: table &gt; caption">
<caption>table caption label</caption>
<tr><th>a</th><th>b</th><th>c</th></tr>
<tr><th>1</th><td>2</td><td>3</td></tr>
</table>
<!-- HTML-AAM: https://www.w3.org/TR/html-aam-1.0/#input-type-text-input-type-password-input-type-number-input-type-search-input-type-tel-input-type-email-input-type-url-and-textarea-element-accessible-name-computation -->
<h2>HTML input with multiple label/for</h2>
<label for="multi-label">textfield label 1</label>
<label for="multi-label">textfield label 2</label>
<input id="multi-label" type="text" data-expectedlabel="textfield label 1 textfield label 2" data-testname="html: multiple label elements[for]" class="ex">
<!-- SVG: -> /svg-aam/name/ -->
<!-- todo: Ruby? -->
<!-- todo: MathML? -->
<!-- todo: does HTML input[placeholder="foo"] count as a host language labeling mechanism? -->
<script>
AriaUtils.verifyLabelsBySelector(".ex");
</script>
</body>
</html>
